<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—领养中心</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- elementUI引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../CSS/PetDetail.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <script src="../JS/jQuery.min.js"></script>

</head>
<body>
    
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
    <!-- mask登录需要作为背景强调登陆框 -->
    <div class="mask"></div>
        <div class="logo">宠物收容所</div>
        <ul class="nav-menu">
            <li><a href="index.html">首页</a></li>
            <li class="current"><a href="AdoptionCenter.html">领养中心</a></li>
            <li><a href="PetKnowledge.html">宠物知识</a></li>
            <li><a href="TeamActivities.html">团队活动</a></li>
            <li><a href="BeVolunteer.html">成为志愿者</a></li>
            <li><a href="Donate.html">捐助</a></li>
        </ul>
        <div  class="nav-login" v-show="user_id">
        <div class="Avater">
            <ul>
            <li><img :src="logginMessage.user_avater_url" alt=""></li>
            <li><div>{{this.logginMessage.userlogin_name}}</div></li>
            <li><div><a href="userCenter.html">用户中心</a></div></li>
            <li @click="outLogin">退出登录</li>
            </ul>
        </div>
        </div>




        <div class="nav-login" v-show="!user_id" @click="Loginhandle">
            <ul>
                <li><a href="javascript:;">
                    <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                </a></li>
                <li><a href="javascript:;">登录/注册</a></li>
            </ul>
        </div>

        <div class="login-box">
        <div class="Login">
            <div class="owl" id="owl">
                <div class="hand"></div>
                <div class="hand hand-r"></div>
                <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
                </div>
            </div>

        <span class="iconfont icon-guanbi1" id="closeBtn"></span>
            <img src="../images/touxiang.png" id="avatar" alt="">
        <form action="">
            <div>
                <span class="iconfont icon-yonghu"></span>
                <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
            </div>
            <div>
                <span class="iconfont icon-ttubiao_password"></span>
                <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
            </div>
            
            <!-- <button @click="loginButton">提交</button> -->
            <span @click="loginButton" style="color: #fff;
            background-color: #20b2aa;
            height: 50px;
            width: 150px;
            text-align: center;
            font-size: 1.2rem;
            line-height: 50px;
            border-radius: 3px;
            ">提交我</span>
        </form>
        <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
        </div>


        <div class="Register"  style="display: none;">

            <div class="owl" id="reowl">
                <div class="hand"></div>
                <div class="hand hand-r"></div>
                <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
                </div>
            </div>

            <span class="iconfont icon-guanbi1" id="closeBtn"></span>
            <img src="../images/touxiang.png" id="avatar" alt="">
            <el-row>
            <el-col>
                <el-form 
                status-icon 
                :inline="true" 
                label-width="0px" 
                :model="registerMessage" 
                ref="registerMessage" 
                class="demo-ruleForm" 
                :rules="rules" 
                
                >
                    <div>
                        <span class="iconfont icon-email"></span>
                        <el-form-item label="" prop="user_email">
                        <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                        </el-form-item>
                        <span class="iconfont icon-dianhua"></span>
                        <el-form-item label="" prop="user_phone">
                        <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <span class="iconfont icon-yonghu"></span>
                        <el-form-item label="" prop="user_name">
                            <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                        </el-form-item>
                        <span class="iconfont icon-dizhi"></span>
                        <el-form-item label="" prop="user_address">
                            <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                        </el-form-item>
                    
                    </div>
                    <div>
                        <span class="iconfont icon-ttubiao_password"></span>

                        <el-form-item label="" prop="user_password">
                        <el-input placeholder="密码" 
                        autocomplete="off" 
                        id="registerpass1" 
                        v-model="registerMessage.user_password" 
                        type="password" 
                        show-password
   
                        ></el-input>
                        </el-form-item>
                        <span class="iconfont icon-ttubiao_password"></span>

                        <el-form-item label="" prop="user_password_again">
                        <el-input placeholder="再次输入密码" 
                        autocomplete="off" 
                        id="registerpass" 
                        v-model="registerMessage.user_password_again" 
                        type="password" 
                        show-password
                        
                        
                        ></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-input
                        style="
                        height: 10vh;
                        "
                        type="textarea"
                        placeholder="介绍一下自己吧"
                        v-model="registerMessage.user_info"
                        maxlength="60"
                        show-word-limit
                        style="font-size: 1.5rem;
                            height: 15vh;
                        "
                        >
                        </el-input>
                    </div>
                    <div style="color: #000;">
                        <template>
                        是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                        <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                        </template>
                    </div>
        <div style="color: #000;
        border: 1px #ccc solid;
        ">
        
        <el-upload
            class="upload-demo"
            drag
            action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
            name="imgFile"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            multiple 
            
            >
            <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
            <i v-else class="el-icon-upload"
            style="
                font-size: 67px;
                color: #C0C4CC;
                margin: 16px 0 16px;
                line-height: 50px;
            "
            >
            <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </i>
            
        </el-upload>
        </div>
        
        <div>
            <el-form-item>
                <el-button type="primary" @click="submitForm('registerMessage')"
                    style="width: 15vw;"
                >提交</el-button>
                <el-button @click="resetForm('registerMessage')"
                    style="width: 15vw;"
                >重置</el-button>
            </el-form-item>
        </div>

                </el-form>
            </el-col>
            </el-row>
            <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
        </div>

        </div>
         <div class="burger">
             <div class="top-line"></div>
             <div class="middle-line"></div>
             <div class="bottom-line"></div>
         </div>
    </nav>

   
    <!-- 网页内容 -->
    <div class="Maincontent" id="maincontent">
        <div class="adoptNeed">
        
            <div class="main">
                
                <div class="text">
                    <h1>领养须知！</h1>
                    <div class="textCenter">
                        <p>1、领养人必须年满21岁，有稳定的住所、工作及较好的经济收入。</p>
                        <p>2、不接受异地领养，只接受深圳市领养，便于联系和回访。</p>
                        <p>3、领养时需提供身份证原件与复印件、电话号码、微信号和详细的家庭住址。</p>
                        <p>4、领养后为了您和家人及宠物的健康，请每年定期将其带到宠物医院或领养之家，我们将免费为其注射疫苗。</p>
                    </div>
                    <h1>领养理由（必填）</h1>
                    <textarea name="" id="" cols="50" rows="4" v-model="adoptMessasge.adopt_log_info"></textarea>
                    <div>
                        <div style="display: none;" id="isSure"><input type="radio" value="1" v-model="isSure">我已知晓确认以上领养须知</div>
                        <div id="text"></div>
                    </div>
                    <div id="sureBTN" style="display: none;">
                        
                        <button @click="AdoptSure">确认领养</button>
                        <button class="closeBtn" @click="closeBtn">点击关闭</button>
                    </div>
                </div>

            </div>
        </div>
        
        <div class="wrapper">
           
            <div class="head">
                <span>
                    <img src="../images/introduce.png" alt="">
                    宠物详情：
                </span>
            </div>
            <div class="main">
                <div class="left">
                    <div class="content">
                        <template v-if="petPhotoList">
                            <div class="block">
                              
                              <el-carousel height="400px">
                                <el-carousel-item 
                                    style="
                                        line-height: 400px;
                                    "
                                v-for="(item,index) in petPhotoList" :key="index">
                                    <img :src="item.pet_photo_url" alt="">
                                </el-carousel-item>
                              </el-carousel>
                            </div>
                           
                        </template>
                        <img id="singlePetimg" v-if="!petPhotoList" :src="singlePet.pet_img" alt=""> 
                        
                        <h2>姓名：{{singlePet.pet_name}}</h2>
                        <h2>年龄：{{singlePet.pet_age}} 岁</h2>
                    </div>
                </div>
                <div class="right">
                        <div class="content">
                            <h1>种类：{{singlePet.pet_type_name}}</h1>
                            <h1>性别：{{singlePet.pet_sex}}</h1>
                            <h3>描述：{{singlePet.pet_info}}</h3> 
                            <div class="adoptBtn"> 
                                <button @click="adoptHandle">点击领养</button>
                            </div>
                           
                        </div>
                </div>
            </div>
           
        </div>

    </div>





    <!-- 网页内容设计结束 -->
  

    <!-- 以下为网页底部设计  -->
    <footer id="footer">
        <div class="content">
            <div class="top">
                <div class="logo" style="color: #000;">
                    <h1>宠物收容所</h1>
                </div>
            </div>
            <div class="middle">
                <div class="left">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                        <li><a href="">公告</a></li>
                        <li><a href="">我们的未来</a></li>
                        <li><a href="">领养帮助</a></li>
                        <li><a href="">信息归档</a></li>
                        <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                    </ul>
                    </div>
                    <div class="right">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                        <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                        <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                        <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">免责声明</a></li>
                    </ul>
                    </div>
                    <div class="wechat" style="padding-left: 2vh;">
                    <h2>关注我们</h2>
                    <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                        <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                    </div>
            </div>
            <div class="bottom">
                <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
            </div>
        </div>
    </footer>
</body>
        
        
<script src="../JS/PetDetail.js"></script>

<script src="../JS/axios.js"></script>

<!-- import Vue before Element -->
<script src="../JS/Vue2.js"></script>
<!-- import JavaScript -->
<script src="../JS/OutJs/AdoptionCenter/elementUIindex.js"></script>
</html> 